import React, {Component} from 'react'
import {View, Text, ScrollView, TouchableOpacity} from 'react-native'
import Loading from '../common/loading_common'
import {GetHomeworkApi} from '../../config/api'
import styles, {BLUE,GREY,CYAN,borderBottomLine} from '../../config/styles'
import AttachmentManagerPro from '../common/attachmentManagerPro'
import {connect} from 'react-redux'
import Enumeration, {TEACHER} from '../../config/enumeration'
import {PutRetractNewHomeworkApi} from '../../config/api'

class HomeworkTaskList extends Component {
    static navigationOptions = ({navigation}) => {
        const params = navigation.state.params
        if (params != undefined && params.retract != undefined) {
            const _headerRight = (<TouchableOpacity
                    style={{paddingRight: 5}}
                    onPress={params.retract}
                >
                    <Text style={[styles.header_font]}>
                        撤回
                    </Text>   
                </TouchableOpacity>
            )   
            return {
                headerRight: _headerRight
            }
        } else {
            return {headerRight: <View />}
        }
    }

    constructor (props) {
        super(props);
        const {params} = props.navigation.state
        this.state = {
            id: params.id,
            refresh: params.refresh,
            data: {},
            loading: true
        }
    }

    componentDidMount () {
       this.getHomework()
       const {role} = this.props.user.user
       if (role == TEACHER) {
           this.props.navigation.setParams({
                retract: () => {
                    PutRetractNewHomeworkApi(this.state.id).then((data) => {
                        if (data.code == 0) {
                            Toast.show('撤回成功')
                            this.state.refresh()
                            this.props.navigation.goBack()
                        } else {
                            Toast.show('无法撤回')
                            return
                        }
                    })
                }
            })
        }
    }

    getHomework = () => {
        GetHomeworkApi(this.state.id).then((data) => {
            this.setState({data: data, loading: false})
        })
    }

    getStudentStatusColor = (status) => {
        switch (status) {
            case "未完成":
                return "#ff951a";
            case /完成|已订/:
                return "#707070";
            case "待订":
                return "#ff4e17";
            default:
                return "#707070"
        }
    }

    //老师的状态信息
    statusBarTeacher = (task) => {
        if (task.is_finish) {
            return (
                <View style={[styles.background_light_grey_plus, {borderRadius: 10, padding: 5}]}>
                    <Text>完成</Text>
                </View>
            )
        } else {
            return (
                <View style={[styles.background_blue, {width:50,borderRadius: 60, padding: 5,justifyContent: 'center',alignItems: 'center'}]}>
                    <Text style={styles.text_white}>{task.finished_count}/{task.total_count}</Text>
                </View>
            )
        }
    }

    //学生的状态信息
    statusBarStudent = (task) => {
        const status = Enumeration.Homework.Status(task.status)
        return (
            <View style={{backgroundColor: this.getStudentStatusColor(status), width:65,borderRadius: 60, padding: 5,justifyContent: 'center',alignItems: 'center'}}>
                <Text style={styles.text_white}>{status}</Text>
            </View>
        )
    }

    //点击task跳转
    onTaskPress = (task) => {
        const {navigation, user} = this.props
        const {role} = user.user
        if (role == TEACHER) {
            navigation.navigate('correcting_with_task', {
                id: task.id,
                homework_id: this.state.id,
            })
        } else {
            navigation.navigate('student_homework_show', {
                id: task.id, 
                homework_id: this.state.id,
                afterSubmit: () => {
                    this.getHomework();
                    this.state.refresh()
                }
            })
        }
    }
    

    //task模板
    taskTemplate = (task, index) => {
        const {role} = this.props.user.user
        return (
            <TouchableOpacity 
                style={{margin: 10, padding: 10, backgroundColor: 'white', flexDirection: 'row', borderRadius:5}}
                key={index}
                onPress={() => this.onTaskPress(task)}
            >
                <View style={{flex: 1}}>
                    <View style={{marginBottom: 5}}>
                        <Text>{task.textbook}</Text>
                    </View>
                    <View style={{marginBottom: 5}}>
                        <Text style={styles.text_gray}>{task.chapter}</Text>
                    </View>
                    <View>
                        <Text style={styles.text_gray}>{task.section}</Text>
                    </View>
                </View>
                <View style={{justifyContent: 'center'}}>
                    {
                        role == TEACHER ? this.statusBarTeacher(task) : this.statusBarStudent(task)
                    }
                </View>
            </TouchableOpacity>
        )
    }

    render () {
        const {loading, data} = this.state
        if (loading) {
            return <Loading />
        } else {
            return(
                <View style={styles.main_body}>
                    <View style={{backgroundColor: 'white', padding: 10, borderBottomWidth: 0.5, borderBottomColor: borderBottomLine}}>
                            <Text style={styles.text_blue}>
                                作业截止时间: {data.collect || '无'}
                            </Text>
                    </View>
                    <View style={{backgroundColor: 'white', padding: 10}}>
                            <Text style={{paddingBottom: 10}}>标题: {data.title}</Text>
                            <Text>备注: {data.description}</Text>
                            <AttachmentManagerPro attachments={data.attachments} />
                    </View>
                    <ScrollView>
                        {data.tasks.map((task, index) => {
                            return this.taskTemplate(task, index)
                        })}
                    </ScrollView>
                </View>
            )
        }
       
    }
}

const mapStateToProps = (state) => {
    return {
        user: state.user    
    }
}

export default connect(mapStateToProps)(HomeworkTaskList)